<!DOCTYPE HTML>
<html>
<head>
    <title>商品分类 - 二手电子乐园</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="is-preload">
    <div id="page-wrapper">

        <!-- Header -->
        <div id="header-container"></div>

        <!-- Main -->
        <div id="main-wrapper">
            <div class="container">
                <header class="major" v-scope v-cloak>
                    <h2>{{ categoryInfo.title }}</h2>
                    <p>{{ categoryInfo.description }}</p>
                </header>

                <div class="row gtr-200">
                    <div class="col-3 col-12-medium">
                        
                        <!-- 筛选条件 -->
                        <section>
                            <h3>筛选条件</h3>
                            <form id="filterForm">
                                <div class="box">
                                    <h4>价格区间</h4>
                                    <div class="row gtr-50">
                                        <div class="col-6 col-12-small">
                                            <input type="number" id="minPrice" placeholder="最低价" min="0" />
                                        </div>
                                        <div class="col-6 col-12-small">
                                            <input type="number" id="maxPrice" placeholder="最高价" min="0" />
                                        </div>
                                    </div>
                                </div>

                                <div class="box">
                                    <h4>品牌</h4>
                                    <div class="col-12">
                                        <input type="checkbox" id="brand-apple" name="brand" value="苹果" />
                                        <label for="brand-apple">苹果</label>
                                    </div>
                                    <div class="col-12">
                                        <input type="checkbox" id="brand-huawei" name="brand" value="华为" />
                                        <label for="brand-huawei">华为</label>
                                    </div>
                                    <div class="col-12">
                                        <input type="checkbox" id="brand-xiaomi" name="brand" value="小米" />
                                        <label for="brand-xiaomi">小米</label>
                                    </div>
                                    <div class="col-12">
                                        <input type="checkbox" id="brand-samsung" name="brand" value="三星" />
                                        <label for="brand-samsung">三星</label>
                                    </div>
                                </div>

                                <div class="box">
                                    <h4>成色</h4>
                                    <div class="col-12">
                                        <input type="checkbox" id="condition-new" name="condition" value="全新" />
                                        <label for="condition-new">全新</label>
                                    </div>
                                    <div class="col-12">
                                        <input type="checkbox" id="condition-95" name="condition" value="95新" />
                                        <label for="condition-95">95新</label>
                                    </div>
                                    <div class="col-12">
                                        <input type="checkbox" id="condition-90" name="condition" value="9成新" />
                                        <label for="condition-90">9成新</label>
                                    </div>
                                    <div class="col-12">
                                        <input type="checkbox" id="condition-80" name="condition" value="8成新" />
                                        <label for="condition-80">8成新</label>
                                    </div>
                                </div>

                                <div class="box">
                                    <ul class="actions">
                                        <li><button type="button" class="button primary small" onclick="applyFilters()">应用筛选</button></li>
                                        <li><button type="button" class="button small" onclick="clearFilters()">清除筛选</button></li>
                                    </ul>
                                </div>
                            </form>
                        </section>

                    </div>
                    <div class="col-9 col-12-medium">
                        
                        <!-- 商品列表 -->
                        <section>
                            <h3>商品列表</h3>
                            <div class="row" v-scope v-cloak>
                                <div class="col-4 col-6-medium col-12-small" v-for="product in filteredProducts" :key="product.id">
                                    <section class="box">
                                        <a :href="'product-detail.html?id=' + product.id" class="image featured">
                                            <img :src="product.image" :alt="product.title" />
                                        </a>
                                        <header>
                                            <h4><a :href="'product-detail.html?id=' + product.id">{{ product.title }}</a></h4>
                                        </header>
                                        <p>{{ product.description }}</p>
                                        <p><strong>价格：¥{{ product.price }}</strong></p>
                                        <ul class="actions">
                                            <li><a :href="'product-detail.html?id=' + product.id" class="button small">查看详情</a></li>
                                        </ul>
                                    </section>
                                </div>
                            </div>

                            <!-- 无商品提示 -->
                            <div v-if="filteredProducts.length === 0" v-scope>
                                <p>暂无符合条件的商品</p>
                                <ul class="actions">
                                    <li><a href="category.html" class="button">清除筛选条件</a></li>
                                </ul>
                            </div>
                        </section>

                    </div>
                </div>
            </div>
        </div>

        <!-- Footer -->
        <div id="footer-container"></div>

    </div>

    <!-- Scripts -->
    <script src="utils/loader.js"></script>
    <script>
        // 等待脚本加载完成
        window.addEventListener('scriptsLoaded', function() {
            // 加载公共组件
            $('#header-container').load('header.html');
            $('#footer-container').load('footer.html');

            // 获取分类类型
            const urlParams = new URLSearchParams(window.location.search);
            const type = urlParams.get('type');

            // 获取所有产品
            const allProducts = [...window.siteData.featuredProducts, ...window.siteData.recommendedProducts];
            
            // 根据分类筛选产品
            let categoryProducts = [];
            let categoryInfo = { title: '全部商品', description: '浏览所有二手电子产品' };

            if (type && window.siteData.categoryData[type]) {
                const categoryData = window.siteData.categoryData[type];
                categoryInfo = {
                    title: categoryData.title,
                    description: categoryData.description
                };
                categoryProducts = allProducts.filter(p => 
                    categoryData.products.includes(p.id)
                );
            } else {
                categoryProducts = allProducts;
            }

            // 初始化 petite-vue
            PetiteVue.createApp({
                categoryInfo: categoryInfo,
                products: categoryProducts,
                filteredProducts: categoryProducts,
                applyFilters: function() {
                    const minPrice = parseInt($('#minPrice').val()) || 0;
                    const maxPrice = parseInt($('#maxPrice').val()) || Infinity;
                    
                    this.filteredProducts = this.products.filter(product => {
                        const price = parseInt(product.price);
                        return price >= minPrice && price <= maxPrice;
                    });
                },
                clearFilters: function() {
                    $('#filterForm')[0].reset();
                    this.filteredProducts = this.products;
                }
            }).mount('[v-scope]');

            // 全局函数
            window.applyFilters = function() {
                const app = document.querySelector('[v-scope]').__petite_vue_app;
                app.applyFilters();
            };

            window.clearFilters = function() {
                const app = document.querySelector('[v-scope]').__petite_vue_app;
                app.clearFilters();
            };
        });
    </script>
</body>
</html>